<template>
	<view class="">
		<view class="box">
			<view class="right">
				<view class="retreat">
					<image src="/image/right.png"></image>
				</view>
				<view class="more">更多信息</view>
			</view>
		</view>
		<view class="box-two">
			<view class="box-three">
				<view>
					<view class="nav">尊敬的用户：</view>
					<view class="navtwo">为保障安全,请如实填写,感谢您的支持</view>
				</view>
				<view class="name" style="display: flex;">
					<view>姓名</view>
					<input v-model="name" style="font-size: 28rpx; color: #999999;" placeholder="请输入姓名" type="text" />
				</view>
				<view class="Company">
					<view>
						<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm"
							@change="changeHandler"></u-picker>

						<u-button @click="show = true">打开</u-button>
					</view>
				</view>
			</view>
			<view @click="getPhone" style=" position: absolute; top:1200rpx; width:90%;margin-left: 30rpx;
			border-radius: 60rpx;  border: 1rpx solid #ccc; height: 80rpx;text-align: center; line-height: 80rpx;  
			background-color: #3F76EE; color: #f7f7f8;
			">预约提交</view>
		</view>
	</view>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				list: '',
				phone: '',
				show: true,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				buttontwo: '请输入所属单位'
			}
		},
		onLoad() {
			let user = wx.getStorageSync('phone')
			console.log('进入小程序页面', user);
			this.phone = user
			console.log(this.phone)
			uni.request({
				url: 'http://192.168.1.56:9091/system/dept/treeData',
				method: 'GET',
				success: (res) => {
					this.list = res.data[0].name
					console.log(res);
				}
			})

		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			async getPhone() {
				// uni.setStorageSync('phone'this.phone);
				console.log('你点击了按钮')
				let one = await axios({
						method: 'post',
						url: 'http://192.168.1.56:9091/msgRegister',
						data: {
							userName: this.name,
							phonenumber: this.phone,
						}
					})
					.then(res => {
						if (res.data.code == 500) {
							console.log(res.data.msg)
						} else if (res.data.code == 0) {
							console.log(res.data.msg)
							uni.redirectTo({
								url: '../more/more'
							});
						} else {
							console.log(res.data.msg)
						}
						console.log(res, '发送了请求，接收的数据')
					})
				let two = await axios({
					method: 'get',
					url: this.url.list,
				}).then(res => {
					this.formData = res.data
				})
			},

		}
	}
</script>
<style>
	.box {
		width: 100vw;
		height: 1200rpx;

		background: linear-gradient(#3E54D7, #ffffff, #ffffff);
	}

	.button {
		width: 400rpx;
		position: absolute;
		top: 250rpx;
		left: 200rpx;
		background-color: #fcf9f9;
	}

	.view1 {
		display: flex;
	}

	.retreat {
		position: absolute;
		top: 70rpx;
		left: 40rpx;
	}

	.more {
		position: absolute;
		top: 70rpx;
		left: 42%;
		color: aliceblue;
		font-size: 30rpx;
		font-weight: bold;
	}

	.right {
		display: flex;
	}

	.right image {
		width: 15rpx;
		height: 30rpx;
	}

	.box-two {
		width: 95%;
		height: 100%;
		background-color: #fcf9f9;
		position: absolute;
		top: 140rpx;
		left: 17rpx;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
	}

	.box-three {
		margin: 20rpx;
		margin-top: 30rpx;
	}

	.nav {
		font-weight: bold;
		font-size: 30rpx;
	}

	.navtwo {
		font-size: 20rpx;
		color: rgb(139, 139, 139);
		margin-top: 18rpx;
	}

	.name {
		font-size: 28rpx;
		margin-top: 70rpx;
	}

	.name input {
		margin-left: 130rpx;
		margin-top: -5rpx;
	}

	.Company {
		margin-top: 40rpx;
	}

	.submit {
		background-color: #3E54D7;
		color: aliceblue;
		border-radius: 45rpx;
		font-size: 30rpx;
		position: absolute;
		top: 1150rpx;
	}

	.sign {
		border: 1px solid #ccc;
		border-radius: 60px;
		margin-top: 850rpx;
		font-size: 30rpx;
		color: #f7f7f8;
		background-color: #3F76EE;
		text-align: center;
		line-height: 40px;
		margin-left: 130rpx;
	}

	.buttontwo {

		width: 200rpx;
		height: 50rpx;
		position: absolute;
		top: 295rpx;
		left: 205rpx;
		font-size: 25rpx;
		border: none;
		color: #999999;
		font-size: 28rpx;
	}
</style>
